<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <tag>商品列表-普通商品发布</tag>
            </el-header>
            <el-container>
                <el-main>
                    <div>
                        <h3>基本信息</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="预约名称">
                                <el-input v-model="form.reservationName" />
                            </el-form-item>
                            <el-form-item label="预约图片">
                                <el-upload class="avatar-uploader"
                                    action="https://localhost:44388/api/app/pictures/upload-picture"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.bookingPicture" :src="form.bookingPicture" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="预约标签">
                                <el-select v-model="form.appointmentLabel" placeholder="请选择">
                                    <el-option label="Zoneone" value="shanghai" />
                                    <el-option label="Zonetwo" value="beijing" />
                                </el-select>
                            </el-form-item>

                            <el-form-item label="预约简介">
                                <el-input v-model="form.appointmentBrief" type="textarea" />
                            </el-form-item>

                            <el-form-item label="预约详情">
                                <el-input v-model="form.reservationDetails" type="textarea" />
                            </el-form-item>
                            <el-form-item label="分类设置">
                                <el-select v-model="form.commodityType" placeholder="请选择">
                                    <el-option label="Zoneone" value="shanghai" />
                                    <el-option label="Zonetwo" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>预约信息</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="上架设置">
                                <el-radio v-model="Pdata.listing" value="1" size="large">全天</el-radio>
                                <el-radio v-model="Pdata.listing" value="2" size="large">时间段</el-radio>
                            </el-form-item>
                            <el-form-item label="收费方式  ">
                                <el-radio v-model="Pdata.listing" value="1" size="large">预约付费</el-radio>
                                <el-radio v-model="Pdata.listing" value="2" size="large">到店付费</el-radio>
                            </el-form-item>
                            <el-form-item label="预约文案">
                                <el-input v-model="Pdata.Drawdown" />
                            </el-form-item>
                            <el-form-item label="预约单位">
                                <el-input v-model="Pdata.reserve" />
                            </el-form-item>
                            <el-form-item v-model="Pdata.discount" label="可用折扣">
                                <el-checkbox label="积分" size="large" />
                                <el-checkbox label="余额" size="large" />
                            </el-form-item>
                            <el-form-item v-model="Pdata.favorable" label="可用优惠">
                                <el-checkbox label="会员折扣" size="large" />
                                <el-checkbox label="优惠券" size="large" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>购买须知</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="是否限购">
                                <el-input v-model="Pdata.restrict" />
                            </el-form-item>
                            <el-form-item label="赠送好友">
                                <el-checkbox v-model="Pdata.gift" label="用户购买商品后可转赠其他好友" size="large" />
                            </el-form-item>
                            <el-form-item label="其他须知">
                                <el-input v-model="Pdata.noticethat" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>使用须知</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="其他规则">
                                <el-input v-model="Pdata.rule" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>其他信息</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="上架设置">
                                <el-radio v-model="Pdata.listing" value="1" size="large">立即上架</el-radio>
                                <el-radio v-model="Pdata.listing" value="2" size="large">暂不上架</el-radio>
                                <el-radio v-model="Pdata.listing" value="3" size="large">定时上架</el-radio>
                            </el-form-item>
                            <el-form-item label="下架设置">
                                <el-checkbox v-model="Pdata.delist" label="定时下架" size="large" />
                            </el-form-item>
                            <el-form-item label="卡券同步">
                                <el-checkbox v-model="Pdata.coupon" label="微信卡包" size="large" />
                            </el-form-item>
                            <el-form-item label="海报标签">
                                <el-input v-model="Pdata.placard" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>分享设置</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="分享标题">
                                <el-input v-model="form.shareTitle" />
                            </el-form-item>
                            <el-form-item label="分享描述">
                                <el-input v-model="form.shareDescription" type="textarea" />
                            </el-form-item>
                            <el-form-item label="分享图片">
                                <el-upload class="avatar-uploader"
                                    action="https://localhost:44388/api/app/pictures/upload-picture"
                                    :show-file-list="false" :on-success="handleAvatarSuccess1"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.sharePictures" :src="form.sharePictures" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
                <el-footer>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="AddProduct">保存</el-button>
                        <el-button>取消</el-button>
                    </div>

                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { InsertReservation } from '@/api/index'
import router from '@/router'

//#region 上传图片

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.bookingPicture = URL.createObjectURL(uploadFile.raw!)

}
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {

    form.sharePictures = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
//#endregion

// do not use same name with ref
const form = reactive({
    reservationName: "",
    bookingPicture: "",
    appointmentLabel: "",
    appointmentBrief: "",
    reservationDetails: "",
    shareTitle: "",
    shareDescription: "",
    sharePictures: "",
    commodityStatus: true,
    sort: 1,
    reservationNumber: 20,
    commodityType: ''
})
const Pdata = reactive({
    discount: '',
    favorable: '',
    restrict: '',
    gift: '',
    noticethat: '',
    timelimit: '',
    appointment: '',
    rule: '',
    listing: '',
    delist: '',
    Drawdown: '',
    coupon: '',
    placard: '',
    reserve: ''
})

const AddProduct = () => {
    console.log(form)
    InsertReservation(form).then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            ElMessage.success("添加成功")
            router.push("/Reservation")
        }
        else {
            ElMessage.error("添加失败")
        }
    })
}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>